window.addEventListener('load', function () {
    var focus = document.querySelector('.banner_main');
    var ul = focus.querySelector('ul');
    var ol = focus.querySelector('ol');

    var picLi = ul.querySelectorAll('li');
    for (var i = 0; i < picLi.length; i++) {//动态生成节点
        var btnLi = document.createElement('li');
        ol.appendChild(btnLi);
    }
    ol.children[0].classList.add('current');//为第一个节点添加类

    var picLiX = 0;//图片计数器
    var picLiWidth = ul.children[1].offsetWidth;
    var timer = setInterval(function () {
        if (picLiX >= picLi.length - 1) {
            picLiX = 0;
        } else {
            picLiX++;
        }
        var moveWidth = -picLiX * picLiWidth;
        ul.style.transform = 'translateX(' + moveWidth + 'px)';
        for (var i = 0; i < ol.children.length; i++) {
            ol.children[i].className = '';
        }
        ol.children[picLiX].classList.add('current');
    }, 2000);

    var touchX = 0;
    ul.addEventListener('touchstart', function (e) {
        clearInterval(timer);
        touchX = e.targetTouches[0].pageX;
    });

    var flag = false;//保证用户滑动才能切换轮播图
    var boxTouchX = 0;
    ul.addEventListener('touchmove', function (e) {
        boxTouchX = e.targetTouches[0].pageX - touchX;//当前手指位置减去手指触摸时距离
        flag = true;
    });

    ul.addEventListener('touchend', function() {
        if (flag == true) {
            // console.log(boxMoveX);
        if (Math.abs(boxTouchX) > 50){
            if (boxTouchX > 0) {
                picLiX--;
            } else if (boxTouchX < 0) {
                picLiX++;
            }
            if (picLiX >= picLi.length) {
                picLiX = 0;
            } else if (picLiX < 0){
                picLiX = picLi.length - 1;
            }
            var moveWidth = -picLiX * picLiWidth;
            ul.style.transform = 'translateX(' + moveWidth + 'px)';
            for (var i = 0; i < ol.children.length; i++) {
                ol.children[i].className = '';
            }
            ol.children[picLiX].classList.add('current');
        } 
        }
        //结束时开启定时器
        clearInterval(timer);
        timer = setInterval(function () {
            if (picLiX >= picLi.length - 1) {
                picLiX = 0;
            } else {
                picLiX++;
            }
            var moveWidth = -picLiX * picLiWidth;
            ul.style.transform = 'translateX(' + moveWidth + 'px)';
            for (var i = 0; i < ol.children.length; i++) {
                ol.children[i].className = '';
            }
            ol.children[picLiX].classList.add('current');
        }, 2000);
    });
});